{% extends "dashboard/service_base.html" %}

{% load i18n humanize helpers rules %}

{% block service_actions %}
<div class="mr-2">{% include 'dashboard/includes/date_range.html' %}</div>
{% has_perm 'core.change_service' user object as can_update %}
{% if can_update %}
<a href="{% contextual_url 'dashboard:service_update' service.uuid %}" class="button field !low bg-neutral-000 w-auto">{% trans 'Manage' %} &rarr;</a>
{% endif %}
{% endblock %}

{% block service_content %}
{% if not stats.has_hits %}
<div class="content mb-6">
    <p>
        {% blocktrans trimmed %}
            This service hasn't collected any data yet. To get started, place the
            following code snippet at the end of the <code>&lt;body&gt;</code> tag on any
            page you'd like to track.
        {% endblocktrans %}
    </p>
    {% include 'dashboard/includes/service_snippet.html' %}
</div>
{% else %}
<div class="grid grid-cols-2 gap-6 md:flex justify-between mb-6 card ~neutral !high px-6" id="stats">
    {% with classes="text-sm font-semibold" good_classes="text-positive-400" bad_classes="text-critical-400" neutral_classes="text-gray-400" %}
    <article class="">
        <p class="label text-gray-400">{% trans 'sessions' %}</p>
        <p class="heading">
            {{stats.session_count|intcomma}}
        <div>
            {% compare stats.compare.session_count stats.session_count "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
        </div>
        </p>
    </article>
    <article class="">
        <p class="label text-gray-400">{% trans 'Hits' %}</p>
        <p class="heading">
            {{stats.hit_count|intcomma}}
        <div>
            {% compare stats.compare.hit_count stats.hit_count "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
        </div>
        </p>
    </article>
    <article class="">
        <p class="label text-gray-400">{% trans 'Load Time' %}</p>
        <p class="heading">
            {% if stats.avg_load_time %}
            {{stats.avg_load_time|floatformat:"0"}}ms
            {% else %}
            ?
            {% endif %}
        <div>
            {% compare stats.compare.avg_load_time stats.avg_load_time "DOWN" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
        </div>
        </p>
    </article>
    <article class="">
        <p class="label text-gray-400">{% trans 'Bounce Rate' %}</p>
        <p class="heading">
            {% if stats.bounce_rate_pct %}
            {{stats.bounce_rate_pct|floatformat:"-1"}}%
            {% else %}
            ?
            {% endif %}
        <div>
            {% compare stats.compare.bounce_rate_pct stats.bounce_rate_pct "DOWN" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
        </div>
        </p>
    </article>
    <article class="">
        <p class="label text-gray-400">{% trans 'Duration' %}</p>
        <p class="heading">
            {% if stats.avg_session_duration %}
            {{stats.avg_session_duration|naturaldelta}}
            {% else %}
            ?
            {% endif %}
        <div>
            {% compare stats.compare.avg_session_duration stats.avg_session_duration "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
        </div>
        </p>
    </article>
    <article class="">
        <p class="label text-gray-400">{% trans 'Hits/Session' %}</p>
        <p class="heading">
            {% if stats.avg_hits_per_session %}
            {{stats.avg_hits_per_session|floatformat:"-1"}}
            {% else %}
            ?
            {% endif %}
        <div>
            {% compare stats.compare.avg_hits_per_session stats.avg_hits_per_session "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
        </div>
        </p>
    </article>
    {% endwith %}
</div>
<div class="card overflow-visible ~neutral !low py-0 mb-6">
    {% include 'dashboard/includes/time_chart.html' with data=stats.chart_data tooltip_format=stats.chart_tooltip_format granularity=stats.chart_granularity click_zoom=True %}
</div>
{% endif %}
<div id="card-grid" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div class="card ~neutral !low limited-height py-2">
        <table class="table">
            <thead class="text-sm">
                <tr>
                    <th>{% trans 'Location' %}</th>
                    <th class="rf">{% trans 'Hits' %}</th>
                </tr>
            </thead>
            <tbody>
                {% for location in stats.locations %}
                <tr>
                    <td class="truncate w-full max-w-0 relative">
                        {% include 'dashboard/includes/bar.html' with count=location.count max=stats.locations.0.count total=stats.hit_count %}
                        <div class="relative flex items-center">
                            {{location.location|default:"Unknown"|urldisplay}}
                        </div>
                    </td>
                    <td>
                        <div class="flex justify-end items-center">
                            {{location.count|intcomma}}
                            <span class="text-xs rf min-w-48">
                                ({{location.count|percent:stats.hit_count}})
                            </span>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td><span class="text-gray-600">{% trans 'No data yet...' %}</span></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if stats.locations.count == RESULTS_LIMIT %}
            <hr class="sep h-8 md:h-12">
            <a href="{% contextual_url 'dashboard:service_location_list' service.uuid %}" class="button ~neutral w-auto mb-2">
                {% trans 'View more locations' %} &rarr;
            </a>
        {% endif %}
    </div>
    <div class="geo-map card ~neutral !low py-2 overflow-y-hidden">
        <p class="text-sm font-semibold p-2 border-b mb-2" style="color: var(--color-title)">
            {% trans 'Sessions by Geography' %} &nbsp
            <button onclick="document.getElementById('card-grid').classList.add('geo-card--use-table-view')" class="text-xs select-none p-0 button ~urge !low">
                ({% trans 'view table' %})
            </button>
        </p>
        {% include 'dashboard/includes/map_chart.html' with countries=stats.countries %}
    </div>
    <div class="geo-table card ~neutral !low limited-height py-2">
        <table class="table">
            <thead class="text-sm">
                <tr>
                    <th>
                        {% trans 'Country' %} &nbsp
                        <button onclick="document.getElementById('card-grid').classList.remove('geo-card--use-table-view'); geoMap.resize()" class="text-xs select-none p-0 button ~urge !low">
                            (view map)
                        </button>
                    </th>
                    <th class="rf">{% trans 'sessions' %}</th>
                </tr>
            </thead>
            <tbody>
                {% for country in stats.countries %}
                <tr>
                    <td class="truncate w-full max-w-0 relative" title="{{country.country|country_name}}">
                        {% include 'dashboard/includes/bar.html' with count=country.count max=stats.countries.0.count total=stats.session_count %}
                        <div class="relative flex items-center">
                            <span class="flex-none {{country.country|flag_class}}"></span> <span class="truncate">{{country.country|country_name}}</span>
                        </div>
                    </td>
                    <td>
                        <div class="flex justify-end items-center">
                            {{country.count|intcomma}}
                            <span class="text-xs rf min-w-48">
                                ({{country.count|percent:stats.session_count}})
                            </span>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td><span class="text-gray-600">No data yet...</span></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="card ~neutral !low limited-height py-2">
        <table class="table">
            <thead class="text-sm">
                <tr>
                    <th>{% trans 'Referrer' %}</th>
                    <th class="rf">{% trans 'sessions' %}</th>
                </tr>
            </thead>
            <tbody>
                {% for referrer in stats.referrers %}
                <tr>
                    <td class="truncate w-full max-w-0 relative">
                        {% include 'dashboard/includes/bar.html' with count=referrer.count max=stats.referrers.0.count total=stats.session_count %}
                        <div class="relative flex items-center">
                            {{referrer.referrer|default:"Direct"|urldisplay}}
                        </div>
                    </td>
                    <td>
                        <div class="flex justify-end items-center">
                            {{referrer.count|intcomma}}
                            <span class="text-xs rf min-w-48">
                                ({{referrer.count|percent:stats.session_count}})
                            </span>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td><span class="text-gray-600">No data yet...</span></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="card ~neutral !low limited-height py-2">
        <table class="table">
            <thead class="text-sm">
                <tr>
                    <th>{% trans 'Operating System' %}</th>
                    <th class="rf">{% trans 'sessions' %}</th>
                </tr>
            </thead>
            <tbody>
                {% for os in stats.operating_systems %}
                <tr>
                    <td class="flex items-center truncate w-full max-w-0 relative" title="{{os.os|default:'Unknown'}}">
                        {% include 'dashboard/includes/bar.html' with count=os.count max=stats.operating_systems.0.count total=stats.session_count %}
                        <div class="relative flex items-center">
                            {{os.os|iconify}}<span class="truncate">{{os.os|default:"Unknown"}}</span>
                        </div>
                    </td>
                    <td>
                        <div class="flex justify-end items-center">
                            {{os.count|intcomma}}
                            <span class="text-xs rf min-w-48">
                                ({{os.count|percent:stats.session_count}})
                            </span>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td><span class="text-gray-600">No data yet...</span></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="card ~neutral !low limited-height py-2">
        <table class="table">
            <thead class="text-sm">
                <tr>
                    <th>{% trans 'Browser' %}</th>
                    <th class="rf">{% trans 'sessions' %}</th>
                </tr>
            </thead>
            <tbody>
                {% for browser in stats.browsers %}
                <tr>
                    <td class="flex items-center truncate w-full max-w-0 relative" title="{{browser.browser|default:'Unknown'}}">
                        {% include 'dashboard/includes/bar.html' with count=browser.count max=stats.browsers.0.count total=stats.session_count %}
                        </div>
                        <div class="relative flex items-center">
                            {{browser.browser|iconify}}<span class="truncate">{{browser.browser|default:"Unknown"}}</span>
                        </div>
                    </td>
                    <td>
                        <div class="flex justify-end items-center">
                            {{browser.count|intcomma}}
                            <span class="text-xs rf min-w-48">
                                ({{browser.count|percent:stats.session_count}})
                            </span>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td><span class="text-gray-600">No data yet...</span></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="card ~neutral !low limited-height py-2">
        <table class="table">
            <thead class="text-sm">
                <tr>
                    <th>{% trans 'Device Type' %}</th>
                    <th class="rf">{% trans 'sessions' %}</th>
                </tr>
            </thead>
            <tbody>
                {% for device_type in stats.device_types %}
                <tr>
                    <td class="truncate w-full max-w-0 relative">
                        {% include 'dashboard/includes/bar.html' with count=device_type.count max=stats.device_types.0.count total=stats.session_count %}
                        <div class="relative flex items-center">
                            <span class="truncate">{{device_type.device_type|default:"Unknown"|title}}</span>
                        </div>
                    </td>
                    <td>
                        <div class="flex justify-end items-center">
                            {{device_type.count|intcomma}}
                            <span class="text-xs rf min-w-48">
                                ({{device_type.count|percent:stats.session_count}})
                            </span>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td><span class="text-gray-600">No data yet...</span></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="card ~neutral !low py-2 overflow-auto">
    {% include 'dashboard/includes/session_list.html' %}
    <hr class="sep h-8 md:h-12">
    <a href="{% contextual_url 'dashboard:service_session_list' service.uuid %}" class="button ~neutral w-auto mb-2">
        {% trans 'View more sessions' %} &rarr;
    </a>
</div>
{% endblock %}
